<template>
    <main class="main">
        <div class="Details-Header">
                <v-DetailsImg :dels="DetailsImg"></v-DetailsImg>
                <transition name="Header">
                     <div class="Header" v-show="gt == false">
                    <div class="Header-Left"  @click="$router.go(-1);">
                        <span></span>
                    </div>
                    <div class="Header-Right">
                        <span></span>
                    </div>
                </div>
                </transition>
               
                <transition name="Header1">
                     <div class="Header1" v-show="gt == true">
                        <div class="Header1-Left"  @click="$router.go(-1);">
                            <span></span>
                        </div>
                        <div class="Header1-Center">
                            <ul>
                                <li class="cur">
                                    <span>商品</span>
                                </li>
                                <li>
                                    <span>评价</span>
                                </li>
                                <li>
                                    <span>详情</span>
                                </li>
                                <li>
                                    <span>推荐</span>
                                </li>
                            </ul>
                        </div>
                        <div class="Header1-Right">
                            <span></span>
                        </div>
                    </div>
                </transition>
               
        </div>
        <v-DetailsVie :vie="DetailsVie"></v-DetailsVie>
        <v-DetailsSite :site="DetailsSite"></v-DetailsSite>
        <v-DetailsList :list=" DetailsList"></v-DetailsList>
        <div class="footer">
            <div class="logo">
                <img src="/src/assets/images/JD.png" alt="">
            </div>
        </div>
        <div class="footer-bottom">
            <div class="icon-btn">
                <i class="icon"></i>
                <span class="txt">店铺</span>
            </div>
            <div class="icon-btn">
                <i class="icon icon1"></i>
                
                <span  class="txt">客服</span>
            </div>
            <router-link to="/ShopCard?curr=true">
                <div class="icon-btn">
                <i class="icon icon2"></i>
                
                <span  class="txt">购物车</span>
            </div>
            </router-link>
            
            <div class="btn" @click="opc = true;">
                <span>加入购物车</span>
            </div>
            <div class="btn btn1">
                <span>立即购买</span>
            </div>
        </div>
         <div class="show" v-show="opc" @click="cancel()" @click.stop>
            <div class="popupMain"  @click.stop @click="opc=true">
                <div class="header">
                    <div class="img">
                        <img :src="Shop.Imgurl" alt="">
                    </div>
                    <div class="text">
                        <p id="close">
                            <i class="close"></i>
                        </p>
                        
                        <p class="price">￥<span>{{Shop.Price}}</span>.00</p> 
                         <p class="prop"><span>已选</span>{{list[indexlist].list_name}}，{{Shop.quantum}}个</p>
                    </div>
                </div>
                <div class="body">
                    <div class="color">颜色</div>
                    <div class="choose">
                        <span class="item" v-for="(item,index) in list" :key="index" :class="{'active' : index == indexlist}" @click="indexlist=index;">{{item.list_name}}</span>
                    </div>
                    <div class="count_choose">
                        <div>数量</div>
                        <div class="wrap_v2">
                            <span class="minus " >
                                <i class="row" :class="{'disable' : Shop.quantum <= 1}"></i>
                            </span>
                            <div class="text-wrap">
                                <input type="tel" class="text" v-model="Shop.quantum" @change="total()">
                            </div>
                            <span class="plus">
                                <i class="row"></i>
                                <i class="col"></i>
                            </span>
                        </div>
                    </div>
                    <div class="btns">
                        <div class="btn" @click="AddCar()" @click.stop>
                            <span>加入购物车</span>
                        </div>
                        <div class="btn btn1">
                            <span>立即购买</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </main>
</template>
<script>
import DetailsImg from '../components/Details/DetailsImg.vue'
import DetailsVie from '../components/Details/DetailsVie.vue'
import DetailsSite from '../components/Details/DetailsSite.vue'
import DetailsList from '../components/Details/DetailsList.vue'
export default {
    name:"Details",
    components:{
        'v-DetailsImg':DetailsImg,
        'v-DetailsVie':DetailsVie,
        'v-DetailsSite':DetailsSite,
        'v-DetailsList':DetailsList
    },
    data:()=>({
        index:'',
        DetailsVie:{
            listprice:'',
            listtext:'',
            listtitle:'',
            listicon:''
        },
        DetailsSite:[],
        DetailsList:[],
        gt:false,
        indexlist:1,
        Shop:{
                "Imgurl": "",
                "Title": "",
                "Price":"",
                "Follow": "移入关注",
                "delete": "删除",
                "quantum":1,
                "total":0,
                "check":false
	    },
        list:[],
        opc:false,
        DetailsImg:[]
    }),
    mounted(){
        this.getdata();
       this.backtop();
    },
    created(){
       this.list=new Array(3).fill('');
       console.log(this.list);
    },
    methods:{
        getdata(){
            let that=this;
            let url='http://localhost:5000';
            this.$http.get(url+'/data/list.json')
            .then(function (response) {
                that.index=that.$route.params.index;
                  //传入购物车
                  
                that.Shop.Imgurl=url+response.data.list[that.index].listimg[0].imgurl
                that.Shop.Title=response.data.list[that.index].listtext;
                that.Shop.Price=response.data.list[that.index].listprice;
                that.Shop.total=that.Shop.Price*that.Shop.quantum;
                that.list=response.data.list[that.index].listcheck[0].nameselect.map(i=>({
                    list_name:i['name']
                }));
                
               // console.log(that.list);
                //价格
                that.DetailsVie.listprice=response.data.list[that.index].listprice;
                that.DetailsVie.listtext=response.data.list[that.index].listtext;
                that.DetailsVie.listtitle=response.data.list[that.index].listtitle;
                that.DetailsVie.listicon=url+response.data.list[that.index].listicon;
                //送至已选
                that.DetailsSite=response.data.list[that.index].listcheck;
                //详情页
                 that.DetailsList=response.data.list[that.index].listrecommend.map(i=>({
                    imgurl:url+i['imgurl'],
                    id:i['id']
                }));
              

                //轮播图
                that.DetailsImg=response.data.list[that.index].listimg.map(i=>({
                    imgurl:url+i['imgurl']
                }));

               // console.log(that.Shop);
                //console.log(that.DetailsImg);
            })
            .catch(function (error) {
            console.log(error);
            })
            .then(function () {
            // always executed
            });
        },
         backtop(){
                let scroll=document.getElementsByClassName("main")[0];
                scroll.addEventListener('scroll',this.scroll,true);
        },
        scroll(){
              let scroll=document.getElementsByClassName("main")[0];
              let header=document.getElementsByClassName("Header")[0];
             if(scroll.scrollTop>0){
                 this.gt=true;
             }
             else{
                 this.gt=false
             }
        },
        total(){
         this.Shop.total=this.Shop.Price *  this.Shop.quantum;//console.log(this.Shop)
        },
        cancel(){
            this.opc=false;
            //console.log('我是父级');
        },
        AddCar(){
            this.$store.commit('SendShop',this.Shop);
            this.opc=false;
        }
    }
}
</script>
<style scoped lang="less">
a{
    text-decoration: none;
    display: block;
    height: 3.125rem;
    color: #333;
}
.main{
    width: 100vw;
    height: 100vh;
    background: #F2F2F2;
    overflow-y:scroll;
}
.Details-Header{
    position: relative;
}
.Header{
    width: 23.4375rem-.625rem*2;
    height: 2.8125rem; 
    padding: 0rem .625rem;
    position: absolute;
    top: 0rem;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    .Header-Left{
        width: 1.875rem;
        height: 1.875rem;
        background: #666;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius:1.25rem ;
        span{
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            background: url("/src/assets/images/HeaderLeft.png") no-repeat;
            background-size: 100% 100%;
        }
    }
    .Header-Right{
        width: 1.875rem;
        height: 1.875rem;
        background: #666;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius:1.25rem ;
        span{
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            background: url("/src/assets/images/all1.png") no-repeat;
            background-size: 100% 100%;
        }
    }
}
.Header1{
    width: 23.4375rem-.625rem*2;
    height: 2.8125rem; 
    padding: 0rem .625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0rem;
    z-index: 3;
    background: #fff;
    border-bottom: .0625rem solid #e5e5e5;
    .Header1-Left{
        width: 1.875rem;
        height: 1.875rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius:1.25rem ;
        span{
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            background: url("/src/assets/images/HeaderLeft1.png") no-repeat;
            background-size: 100% 100%;
        }
    }
    .Header1-Center{
        width: 14.6875rem;
        height: 2.75rem;
        ul{
            display: flex;
            li{
                width:3.6875rem ;
                height: 2.75rem;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: .875rem;
                color: #333;
            }
            .cur{
                font-weight: bold;
            }
        }
    }
    .Header1-Right{
        width: 1.875rem;
        height: 1.875rem;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            display: inline-block;
            width: 1.25rem;
            height: 1.25rem;
            background: url("/src/assets/images/all.png") no-repeat 50%;
            background-size:100%;
        }
    }
}
.footer{
    width: 23.4375rem;
    height: 1.25rem;
    padding: 3.125rem*2 0rem;
    display: flex;
    justify-content: center;
    .logo{
        width: 6.25rem;
        height: 1.25rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.Header-enter{
    opacity: 0;
}
.Header-enter-to{
    opacity: 1;
}
.Header-enter-active{
    transition: all 2s;
}
.Header1-enter{
    opacity: 0;
}
.Header1-enter-to{
    opacity: 1;
}
.Header1-enter-active{
    transition: all 2s;
}
.footer-bottom{
    width: 23.4375rem;
    height: 3.125rem;
    background: #fff;
    position: fixed;
    bottom: 0rem;
    z-index: 2;
    display: flex;
    align-items: center;
    font-size: .5625rem;
    .icon-btn{
        width: 3.28125rem;
        height: 3.125rem;
        .icon{
            display: block;
           margin: .3125rem auto 0;
            width: 1.25rem;
            height: 1.5625rem;
            background: url("/src/assets/images/icon1.png") no-repeat;
            background-size: auto 1.25rem;
        }
        .txt{
            display: block;
           
        }
        .icon1{
            background-image: url("/src/assets/images/icon2.png");
        }
        .icon2{
            background-image: url("/src/assets/images/icon3.png");
        }
        
    }
    .btn{
            width: 6.5rem;
            height: 2.375rem;
            border-radius: 1.3125rem;
            margin-right: .3125rem;
            background-image:linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c);;
            color: #fff;
            font-weight: bold;
            font-size: .8125rem;
            display: flex;
            justify-content: center;
            align-items: center;
    }
    .btn1{
            background-image: linear-gradient(135deg,#ffba0d,#ffc30d 69%,#ffcf0d);
    }
}
.show{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0rem;
    background: rgba(0,0,0,.7);
    z-index: 10;
    .popupMain{
        width: 100%;
        height: 25.6875rem;
        background: #fff;
        border-top-left-radius:.75rem;
        border-top-right-radius: .75rem;
        position: absolute;
        bottom: 0rem;
        z-index: 100;
    }
    .header{
        width: 100%;
        height: 7.375rem;
        display: flex;
        .img{
            width: 6.25rem;
            height: 6.25rem;
            padding: .9375rem;
            img{
                width: 100%;
                height: 100%;
                border-radius: .625rem;
        }
    }
    }
    
    .text{
        width: 14.375rem;
        height: 3.75rem;
       position: relative;

        .price{
            font-size:.75rem;
            color: #f2270c;
            text-align: left;
            span{
                font-size: 1.5rem;
                font-weight: bold;
            }
        }
        .prop{
            font-size: .75rem;
            span{
                padding-right: .625rem;
                color: #8c8c8c;
            }
        }
        #close{
            height: 2.75rem;
            position: relative;
            padding-bottom:1.25rem ;
        }
        .close{
            display: block;
            width: 2rem;
            height: 2.75rem;
            position: absolute;
            right: 0rem;
        }
        .close::after{
            content:"" ;
            position: absolute;
            width: 1.25rem;
            height: 1.25rem;
            background: url("/src/assets/images/close.png") no-repeat;
            background-size: cover;
            top: 1.25rem;
        }
    }
    .body{
        width: 23.4375rem;
        height: 11.9375rem;
        padding:1.25rem  0rem;
        .color{
            padding: 0rem 1.25rem;
            color:#262626 ;
            font-size: .8125rem;
            text-align: left;
            font-weight: 700;
            height: 1.875rem;
        }
        .choose{
            width: 23.4375rem - .375rem*2;
            padding: 0rem .375rem;
            .item{
                font-size: .6875rem;
                display: block;
                width: 11.75rem;
                height: 1.875rem;
                color: #262626;
                background: #f2f2f2;
                margin-bottom: .625rem;
                text-align: center;
                line-height: 1.875rem;
                border-radius:.9375rem ;
            }
            .active{
                background: #fcedeb;
                border: .0625rem solid #f2270c;
                font-size: .6875rem;
                color: #f2270c;
                font-weight: 700;
                height: 1.75rem;
            }
        }
        .count_choose{
            width: 23.4375rem - 1.125rem*2 ;
            height: 3.9375rem - 1rem*2 ;
            padding: 1rem 1.125rem;
            display: flex;
            justify-content: space-between;
            .wrap_v2{
                width: 4.125rem;
                height: 1.15625rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .minus{
                    width: .9375rem;
                    height: 1.125rem;
                    position: relative;
                    line-height: 1.125rem;
                    text-align: center;
                    margin-top: .3125rem;
                }
                .row{
                    font-style: normal;
                    width: .5rem;
                    height: .125rem;
                    display: inline-block;
                    background: #262626;
                    border-radius:1.25rem ;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform:translate(-50%,-50%);
                }
                .col{
                    display: block;
                    width: .125rem;
                    height: .5rem;
                    border-radius: 1.25rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform:translate(-50%,-50%) ;
                    background: #262626;
                }
                .plus{
                    display: block;
                    position: relative;
                    width: .9375rem;
                    height: 1.125rem;
                    margin-top:.3125rem ;
                }
                .text-wrap{
                    width: 2.125rem;
                    height:1.125rem;
                    input{
                        font-size: .6875rem;
                        background: #f2f2f2;
                        height: 1.125rem;
                        width: 100%;
                        color: #333;
                        text-align: center;
                        border: none;
                    }
                }
                .disable{
                     background: #f2f2f2; 
                }
            }
        }
        .btns{
            width: 23.4375rem - 1.125rem;
            height: 3.125rem - .375rem*2;
            padding: .375rem 0rem .375rem 1.125rem;
            display: flex;

             .btn{
                width:10.4375rem;
                height: 2.375rem;
                border-radius: 1.3125rem;
                margin-right: .3125rem;
                background-image:linear-gradient(135deg,#f2140c,#f2270c 70%,#f24d0c);;
                color: #fff;
                font-weight: bold;
                font-size: .8125rem;
                display: flex;
                justify-content: center;
                align-items: center;
                }
            .btn1{
                    background-image: linear-gradient(135deg,#ffba0d,#ffc30d 69%,#ffcf0d);
            }
        }
    }
}

</style>